<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr">
    
    <head>
        <style type="text/css">
            body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
        </style>
        <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js"
        djConfig="parseOnLoad: true">
        </script>
        <script type="text/javascript">
            dojo.require("dijit.form.Button");
            dojo.require("dijit.Dialog");
            dojo.require("dijit.form.TextBox");
            dojo.require("dijit.form.DateTextBox");
            dojo.require("dijit.form.TimeTextBox");

            dojo.addOnLoad(function() {
                formDlg = dijit.byId("formDialog");
                dojo.connect(dijit.byId("buttonThree"), "onClick", formDlg, "show");
            });

            function checkData() {
                var data = formDlg.attr('value');
                console.log(data);
                if (data.sdate > data.edate) {
                    alert("Start date must be before end date");
                    return false;
                } else {
                    return true;
                }
            }
        </script>
        <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css"
        />
    </head>
    
    <body class=" claro ">
        <div dojoType="dijit.Dialog" id="formDialog" title="Form Dialog" execute="alert('submitted w/args:\n' + dojo.toJson(arguments[0], true));">
            <table>
                <tr>
                    <td>
                        <label for="name">
                            Name:
                        </label>
                    </td>
                    <td>
                        <input dojoType="dijit.form.TextBox" type="text" name="name" id="name">
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="loc">
                            Location:
                        </label>
                    </td>
                    <td>
                        <input dojoType="dijit.form.TextBox" type="text" name="loc" id="loc">
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="date">
                            Start date:
                        </label>
                    </td>
                    <td>
                        <input dojoType="dijit.form.DateTextBox" type="text" name="sdate" id="sdate">
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="date">
                            End date:
                        </label>
                    </td>
                    <td>
                        <input dojoType="dijit.form.DateTextBox" type="text" name="edate" id="edate">
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="date">
                            Time:
                        </label>
                    </td>
                    <td>
                        <input dojoType="dijit.form.TimeTextBox" type="text" name="time" id="time">
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="desc">
                            Description:
                        </label>
                    </td>
                    <td>
                        <input dojoType="dijit.form.TextBox" type="text" name="desc" id="desc">
                    </td>
                </tr>
                <tr>
                    <td align="center" colspan="2">
                        <button dojoType="dijit.form.Button" type="submit" onClick="return dijit.byId('formDialog').isValid();">
                            OK
                        </button>
                        <button dojoType="dijit.form.Button" type="button" onClick="dijit.byId('formDialog').hide();">
                            Cancel
                        </button>
                    </td>
                </tr>
            </table>
        </div>
        <p>
            When pressing this button the dialog will popup:
        </p>
        <button id="buttonThree" dojoType="dijit.form.Button" type="button">
            Show me!
        </button>
        <!-- NOTE: the following script tag is not intended for usage in real
        world!! it is part of the CodeGlass and you should just remove it when
        you use the code -->
        <script type="text/javascript">
            dojo.addOnLoad(function() {
                if (document.pub) {
                    document.pub();
                }
            });
        </script>
    </body>

</html>